<template>
  <div>
    <Layout>
      <div id="main"></div>
      <div id="main2"></div>
    </Layout>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import Vue from "vue";
import { Component } from "vue-property-decorator";
import recordListModel from "@/models/recordListModel";
type Data = {
    value:number
    name:string
}
@Component
export default class Statictics extends Vue {
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    var myChart2 = echarts.init(document.getElementById("main2"));
    let options1 = {
      backgroundColor: "rgba(244, 244, 244, 0.7)",
      title: {
        text: "支出统计图",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "item",
      },
      visualMap: {
        show: false,
        inRange: {
          colorLightness: [0.7, 0.3],
        },
      },
      series: [
        {
          name: "数据来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: [] as Data[],
          roseType: "radius",
          label: {
            color: "rgba(0, 0, 0, 0.7)",
            fontSize: 14,
          },
          labelLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.7)",
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            color: "#c23531",
            shadowBlur: 100,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx: number | undefined) {
            return Math.random() * 200;
          },
        },
      ],
    };
    let options2 = {
      backgroundColor: "rgba(244, 244, 244, 0.7)",
      title: {
        text: "收入统计图",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "item",
      },
      visualMap: {
        show: false,
        min: 1000,
        max: 5000,
        inRange: {
          colorLightness: [0.3, 0.7],
        },
      },
      series: [
        {
          name: "数据来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "50%"],
          data: [] as Data[],
          roseType: "radius",
          label: {
            color: "rgba(0, 0, 0, 0.7)",
            fontSize: 14,
          },
          labelLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.7)",
            },
            smooth: 0.2,
            length: 10,
            length2: 20,
          },
          itemStyle: {
            color: "#c23531",
            shadowBlur: 100,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx: number | undefined) {
            return Math.random() * 200;
          },
        },
      ],
    };

    let acc:Data[] = []
    let add:Data[]= []
     recordListModel.fetch().forEach((item) => {
        if(item.type ==='-'){
            acc.push({value: item.amount,name:item.tags.map((item) => item.name).join(",")})
        }else{
            add.push({value: item.amount,name:item.tags.map((item) => item.name).join(",")})
        }
    });
    options1.series[0].data = acc
    options2.series[0].data = add
    myChart.setOption(options1);
    myChart2.setOption(options2);
  }
  
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 50%;
}
#main2 {
  width: 100%;
  height: 50%;
}
</style>
